<template>
  <a-modal
    v-model:visible="uploadModal"
    title="导入成员"
    unmount-on-close
    width="420px"
    @cancel="handleCancel"
  >
    <a-upload
      ref="uploadRef"
      v-model:file-list="fileList"
      action="/api/cde-collaboration/project/importUser"
      :headers="{
        'Fusion-Auth': getToken() || '',
        'Fusion-Biz': setFusionBiz() || '',
      }"
      :with-credentials="true"
      :auto-upload="false"
      :data="{ projectId: '12' }"
      :limit="1"
      draggable
      show-file-list
      list-type="text"
      tip="(支持xlsx、xls)"
      :show-link="true"
      @before-upload="beforeUpload"
      @success="handleSuccess"
    >
      <template #upload-item="{ fileItem }">
        <div :key="fileItem.uid" class="arco-upload-list-item">
          <div class="arco-upload-list-item-content">
            <span class="arco-upload-list-item-thumbnail">
              <IconFile />
            </span>
            <div class="arco-upload-list-item-name">
              <div class="arco-upload-list-item-name-text">{{
                fileItem.name
              }}</div>
            </div>
          </div>
          <span
            class="arco-upload-list-item-operation"
            @click="removeFile(fileItem)"
          >
            <span class="arco-icon-hover">
              <span class="arco-upload-icon arco-upload-icon-remove">
                <IconClose />
              </span>
            </span>
          </span>
        </div>
      </template>
    </a-upload>
    <template #footer>
      <div class="footer">
        <a-link href="/member-tpl.xlsx">下载导入成员模板表格</a-link>
        <a-space>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleSubmit">导入</a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import type { FileItem } from '@arco-design/web-vue/es/upload/interfaces';
  import { IconFile, IconClose } from '@arco-design/web-vue/es/icon';
  import { Message, UploadInstance } from '@arco-design/web-vue';
  import { setFusionBiz } from '@/api/interceptor';
  import { getToken } from '@/utils/auth';

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
  });
  const emits = defineEmits(['update:modelValue', 'refresh']);

  const uploadModal = computed({
    get() {
      return props.modelValue;
    },
    set(val) {
      emits('update:modelValue', val);
    },
  });
  const handleCancel = () => {
    emits('update:modelValue', false);
  };

  const fileList = ref<FileItem[]>([]);

  const uploadRef = ref<UploadInstance>();
  const handleSubmit = () => {
    // 不传参数默认提交fileList里第一个init状态的文件
    uploadRef.value?.submit();
  };
  const handleSuccess = () => {
    emits('update:modelValue', false);
    emits('refresh');
  };

  // const customRequest = (option: RequestOption): UploadRequest => {
  //   const { fileItem, data } = option;
  //   console.log(option, fileItem.file);
  //   const formData = new FormData();
  //   formData.append('file', fileItem.file);
  //   formData.append('projectId', data?.projectId);
  //   importMember(formData).then((res) => {
  //     console.log(res);
  //   });
  // };

  const beforeUpload = (file: File): boolean | Promise<boolean | File> => {
    // 判断file格式是否正确
    if (
      [
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      ].indexOf(file.type) === -1
    ) {
      Message.error('请上传正确的xls格式');
      return false;
    }
    return true;
  };

  const removeFile = (fileItem: FileItem) => {
    fileList.value = fileList.value.filter((item) => item.uid !== fileItem.uid);
  };
</script>

<style lang="less" scoped>
  .arco-upload-list-item-thumbnail {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      color: var(--color-text-2);
    }

    button {
      border-radius: var(--border-radius-medium);
    }
  }
</style>
